<div class="container">

  <h2>Retrieval Options</h2>

  <form name="extractionForm" class="form-horizontal well" role="form" novalidate>
    <div class="form-group" ng-class="{ 'has-error' : extractionForm.limit.$invalid && !extractionForm.limit.$pristine }">
      <label class="control-label col-sm-3" for="lang">Language of Labels</label>
      <div class="col-sm-4">
        <select class="form-control" name="lang" id="lang" ng-model="vm.currentLanguage"
                ng-options="language.id as language.name for language in vm.availableLanguages">
        </select>
      </div>

      <label for="limit" class="col-sm-2 control-label">Number of Classes</label>
      <div class="col-sm-3">
        <input class="form-control" name="limit" id="limit" type="number" ng-model="vm.currentLimit" min="1" required/>
        <p ng-show="extractionForm.limit.$invalid && !extractionForm.limit.$pristine" class="help-block">
          must be greater 0!
        </p>
      </div>
    </div>

    <div class="form-group">
      <div class="col-lg-offset-3 col-sm-10">
        <div class="checkbox">
          <label>
            <input type="checkbox" name="ordered" ng-model="vm.propsOrdered">
            retrieve properties in descending order of their usage frequency
          </label>
        </div>
      </div>
    </div><!-- /.form-group -->

    <div class="form-group">
      <div class="col-sm-12">
        <div class= "pull-right">
          <button type="button" class="btn btn-primary"
                  ng-click="vm.saveExtractionSettings(); extractionForm.$setPristine()"
                  ng-disabled="!(extractionForm.lang.$dirty || extractionForm.limit.$dirty
                                || extractionForm.ordered.$dirty) || extractionForm.$invalid">
            <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
            Save
          </button>
        </div>
      </div>
    </div>
  </form>

  <h2>Blacklists</h2>
  <form name="lists" class="form-horizontal well" role="form" novalidate>
    <div class="form-group">
      <label class="control-label col-sm-3">
        Predefined Lists
      </label>
      <div class="col-sm-2">
        <div class="checkbox">
          <label>
            <input type="checkbox" name="rdf" ng-model="vm.enabled.RDF"
                   ng-change="vm.restoreListDefaults(); bl.$setPristine()">
            RDF
          </label>
        </div>
      </div>

      <div class="col-sm-2">
        <div class="checkbox">
          <label>
            <input type="checkbox" name="rdfs" ng-model="vm.enabled.RDFS"
                   ng-change="vm.restoreListDefaults(); bl.$setPristine()">
            RDFS
          </label>
        </div>
      </div>

      <div class="col-sm-2">
        <div class="checkbox">
          <label>
            <input type="checkbox" name="owl" ng-model="vm.enabled.OWL"
                   ng-change="vm.restoreListDefaults(); bl.$setPristine()">
            OWL
          </label>
        </div>
      </div>

      <div class="col-sm-2">
        <div class="checkbox">
          <label>
            <input type="checkbox" name="skos" ng-model="vm.enabled.SKOS"
                   ng-change="vm.restoreListDefaults(); bl.$setPristine()">
            SKOS
          </label>
        </div>
      </div>
    </div>

    <div class="form-group" style="margin-bottom: 0;">
      <div class="col-sm-offset-3 col-sm-9">
        <uib-alert type="warning" style="margin-bottom: 0;">
          <span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
          Any manual changes below will be overwritten!
        </uib-alert>
      </div>
    </div>
  </form>

  <form class="form-horizontal well" name="bl" role="form" novalidate>
    <div class="form-group">
      <label for="classBlacklist" class="control-label col-sm-3">Classes</label>
      <div class="col-sm-9">
        <textarea class="form-control" id="classBlacklist" name="clazz" rows="6" ng-model="vm.classBlacklistInput">
        </textarea>
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-sm-3" for="propBlacklist">Properties</label>
      <div class="col-sm-9">
        <textarea class="form-control" id="propBlacklist" name="prop" rows="6" ng-model="vm.propertyBlacklistInput">
        </textarea>
      </div>
    </div>

    <div class="form-group">
      <div class="col-sm-12">
        <div class= "pull-right">
          <button type="button" class="btn btn-default" ng-click="vm.restoreDefaults(); bl.$setPristine()"
                  ng-disabled="bl.clazz.$pristine && bl.prop.$pristine && vm.enabled.RDF && vm.enabled.RDFS &&
                                vm.enabled.OWL && !vm.enabled.SKOS">
            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            Restore Defaults
          </button>
          <button type="button" class="btn btn-primary"
                  ng-click="vm.saveBlacklists(); bl.$setPristine(); lists.$setPristine()"
                  ng-disabled="!(lists.rdf.$dirty || lists.rdfs.$dirty || lists.owl.$dirty || lists.skos.$dirty ||
                                bl.clazz.$dirty || bl.prop.$dirty) || bl.$invalid">
            <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></span>
            Save
          </button>
        </div>
      </div>
    </div>
  </form>
</div>
